<form action="{% url 'polls:vote' question.id %}" method="post" class="vote-form">
    {% csrf_token %}
    <div class="vote-card">
        <div class="vote-header">
            <div class="vote-icon">🗳️</div>
            <h1 class="vote-title">{{ question.question_text }}</h1>
            <p class="vote-subtitle">请选择您的答案</p>
        </div>
        
        {% if error_message %}
        <div class="vote-alert">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>{{ error_message }}</span>
        </div>
        {% endif %}
        
        <div class="vote-options">
            {% for choice in question.choice_set.all %}
            <div class="vote-option">
                <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" class="vote-input">
                <label for="choice{{ forloop.counter }}" class="vote-label">
                    <span class="vote-checkmark"></span>
                    <span class="vote-option-text">{{ choice.choice_text }}</span>
                </label>
            </div>
            {% endfor %}
        </div>
        
        <button type="submit" class="vote-submit">
            <span>确认投票</span>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
    </div>
</form>

<style>
    :root {
        --primary: #5B8FF9;
        --primary-dark: #3A72E0;
        --primary-light: #7DA7F9;
        --secondary: #6DD3CE;
        --error: #EF6A6A;
        --success: #2ECC71;
        --text-dark: #2C3E50;
        --text-medium: #57687A;
        --text-light: #95A5A6;
        --bg-light: #F5F7FA;
        --bg-white: #FFFFFF;
        --border-radius: 16px;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
        --transition: all 0.3s ease;
    }
    
    body {
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: var(--bg-light);
        color: var(--text-dark);
        line-height: 1.6;
        padding: 20px;
    }
    
    .vote-form {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .vote-card {
        background: var(--bg-white);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        padding: 32px;
        transition: var(--transition);
    }
    
    .vote-card:hover {
        box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    }
    
    .vote-header {
        text-align: center;
        margin-bottom: 28px;
    }
    
    .vote-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.9;
        color: var(--primary);
    }
    
    .vote-title {
        font-size: 22px;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 8px;
    }
    
    .vote-subtitle {
        color: var(--text-medium);
        font-size: 15px;
    }
    
    .vote-alert {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        background: #FEE2E2;
        color: var(--error);
        border-radius: 8px;
        margin-bottom: 24px;
        font-size: 14px;
        border-left: 4px solid var(--error);
    }
    
    .vote-alert svg {
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .vote-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
    }
    
    .vote-option {
        position: relative;
    }
    
    .vote-input {
        position: absolute;
        opacity: 0;
    }
    
    .vote-label {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        background: var(--bg-light);
        border-radius: 12px;
        cursor: pointer;
        transition: var(--transition);
        border: 1px solid transparent;
    }
    
    .vote-label:hover {
        background: rgba(91, 143, 249, 0.05);
        border-color: rgba(91, 143, 249, 0.2);
    }
    
    .vote-checkmark {
        width: 22px;
        height: 22px;
        border: 2px solid var(--text-light);
        border-radius: 50%;
        margin-right: 16px;
        position: relative;
        transition: var(--transition);
        flex-shrink: 0;
    }
    
    .vote-input:checked ~ .vote-label .vote-checkmark {
        background: var(--primary);
        border-color: var(--primary);
    }
    
    .vote-input:checked ~ .vote-label .vote-checkmark::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
    }
    
    .vote-option-text {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-dark);
    }
    
    .vote-input:checked ~ .vote-label .vote-option-text {
        color: var(--primary);
    }
    
    .vote-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: 0 4px 12px rgba(91, 143, 249, 0.3);
    }
    
    .vote-submit:hover {
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(91, 143, 249, 0.4);
    }
    
    .vote-submit svg {
        margin-left: 8px;
        transition: var(--transition);
    }
    
    .vote-submit:hover svg {
        transform: translateX(4px);
    }
</style>